let data = {
  pagenum: 1,  //当前页
  pagesize: 2, //显示几条
}

// ----------------查询数据并渲染----------------
function renderArticle() {
  $.ajax({
    url: '/my/article/list',
    data: data,
    success: function (res) {
      console.log(res.total);
      showPage(res.total)
      if (res.status === 0) {
        let str = ''
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.title}</td>
            <td>${item.cate_name}</td>
            <td>${item.pub_date}</td>
            <td>${item.state}</td>
            <td>
              <a href="./edit.html?id=${item.id}" class="layui-btn layui-btn-xs">编辑</a>
              <button type="button" data-id="${item.id}" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          `
        })
        $('tbody').html(str)
      }
    }
  })
}
renderArticle()

// -------------------------分页----------------------------
function showPage(a) {
  let laypage = layui.laypage
  //执行一个laypage实例
  laypage.render({
    elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
    count: a, //数据总数，从服务端得到
    limit: data.pagesize,//每页显示几条数据
    curr: data.pagenum, //当前页
    // prev: '' 自定义上一页 下一页
    layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'], //自定义排版
    limits: [2, 3, 4, 5],  //自定义每页条数
    jump: function (obj, first) {
      //首次不执行
      if (!first) {
        //do something
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        data.pagenum = obj.curr
        data.pagesize = obj.limit
        renderArticle()

        console.log(123)
      }
    },
  })
}
// -----------------------筛选-------------------------
//  获取真实的分类,渲染到下拉框的位置
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    if (res.status === 0) {
      let str = ''
      res.data.forEach(item => {
        str += `
        <option value="${item.id}">${item.name}</option>
        `
      })
      $('#category').append(str)
      // 必须要更新渲染
      let form = layui.form
      form.render()
    }
  }
})
// 完成筛选
// 表单提交 --> 阻止默认行为 --> 获取数据(分类id和状态) --> 修改请求参数  -->调用renderArticle更新页面数据
$('form').on('submit', function (ev) {
  ev.preventDefault()
  let cate_id = $('#category').val()
  let state = $('#state').val()
  // 判断 是否选择了分类或状态
  if (cate_id) {
    data.cate_id = cate_id
  } else {
    delete data.cate_id //移除对象的属性
  }

  if (state) {
    data.state = state
  } else {
    delete data.state
  }

  // 重置页码为1
  data.pagenum = 1
  renderArticle()
})




// ---------------------删除-------------------------
$('tbody').on('click', 'button:contains("删除")', function () {
  let id = $(this).data('id')
  layer.confirm('你确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
    $.ajax({
      url: '/my/article/delete/' + id,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message)
          renderArticle()
        }
      }
    })
    layer.close(index) //关闭弹层
  })
})

